<title>编辑管理员 - {:getSettingOptionsCache('base.web_site_title') ?: '后台管理系统模板'}</title>
<!--表格插件css-->
<link rel="stylesheet" type="text/css" href="{:HTTP_STATIC_ADMIN_CDN_URL}css/style.min.css">

<div class="col-lg-12">
    <div class="card-body">
        <form action="" id="example-from">
            <input type="hidden" name="id" value="{$info.id}" />
            <div class="mb-3 row align-items-center">
                <div class="col-md-1"><label class="col-form-label" for="name">管理员名称</label></div>
                <div class="form-group col">
                    <input type="text" maxlength="15" class="form-control" autocomplete="off"  id="name" name="name" value="{$info.name}" placeholder="请输入管理员名，最大字数为15个" />
                </div>
            </div>
            <div class="mb-3 row align-items-center">
                <div class="col-md-1"><label class="col-form-label" for="password">原密码</label></div>
                <div class="form-group col">
                    <input type="password" autocomplete="off" class="form-control" id="oldpassword" name="oldpassword" value="" placeholder="请输入原密码">
                </div>
            </div>
            <div class="mb-3 row align-items-center">
                <div class="col-md-1"><label class="col-form-label" for="password">新密码</label></div>
                <div class="form-group col">
                    <input type="password" autocomplete="off" class="form-control" id="password" name="password" value="" placeholder="请输入管理员密码">
                </div>
                <div class="col-auto">
                    <span id="passwordHelpInline" class="form-text">
                      长度必须为8-20个字符。
                    </span>
                </div>
            </div>
            <div class="mb-3 row align-items-center">
                <div class="col-md-1"><label class="col-form-label" for="password">确认新密码</label></div>
                <div class="form-group col">
                    <input type="password" autocomplete="off" class="form-control" id="repassword" name="repassword" placeholder="请输入管理员密码">
                </div>
            </div>
            <div class="mb-3 row align-items-center">
                <div class="col-md-1"><label class="col-form-label" for="gid">角色</label></div>
                <div class="form-group col">
                    <select name="gid" id="gid" class="exampleSelect" data-search="true">
                        <option value=""></option>
                        {volist name="gadmin" id="v"}
                        <option value="{$v.id}" {$v.id == $info.gid ? 'selected' : ''}>{$v.name}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="mb-3 row align-items-center">
                <label class="col-md-1 col-form-label">是否启用</label>
                <div class="col">
                    <div class="form-check form-switch">
                        <input type="checkbox" class="form-check-input" value="1" id="status" name="status" {$info.status == 1 ? 'checked' : ''}>
                        <label class="form-check-label" for="status"></label>
                    </div>
                </div>
            </div>
            <div class="mb-3 row">
                <div class="col offset-md-1">
                    <button type="submit" class="btn btn-primary save-btn">立即编辑</button>
                    <button type="reset" class="btn btn-warning">重 置</button>
                    <button type="button" class="btn btn-secondary close-btn">关闭</button>
                </div>
            </div>

        </form>

    </div>
</div>


<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/layer/src/layer.js"></script>
<!--加载动画插件-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/lyear-loading.js"></script>
<!--表单验证-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/jquery-validate/messages_zh.min.js"></script>

<script>
    $(function (){
        let $exampleFrom = $('#example-from');
        $exampleFrom.submit(function(){
            event.preventDefault();
        });
        $exampleFrom.validate({
            ignore: ".ignore",    // 插件默认不验证隐藏元素,这里可以自定义一个不验证的class,即验证隐藏元素,不验证class为.ignore的元素
            focusInvalid: false,  // 禁用无效元素的聚焦
            rules: {
                'name': {
                    required: true,
                },
                'gid': {
                    required: true,
                },
            },
            errorPlacement: function errorPlacement(error, element) {
                var $parent = $(element).parents('.form-group');
                if ($parent.find('.invalid-feedback').length) {
                    return;
                }
                $(element).addClass('is-invalid');
                $parent.append(error.addClass('invalid-feedback'));
            },
            highlight: function(element) {
                var $el = $(element);
                if ($el.hasClass('js-tags-input')) {
                    $el.next('.tagsinput').addClass('is-invalid');  // tags插件所隐藏的输入框没法实时验证，比较尴尬
                }
            },
            unhighlight: function(element) {
                $(element).next('.tagsinput').removeClass('is-invalid');
                $(element).removeClass('is-invalid');
            },
            submitHandler: function(form) {
                let l = $('body').lyearloading({
                    opacity: 0.2,
                    spinnerSize: 'lg'
                });
                post("{:url('/admin/admin/edit')}", $(form).serialize()).success(res => {
                    if(res.code === 200){
                        setTimeout(function () {
                            l.destroy();
                            $('.close-btn').click();
                            parent.refreshTable();
                        }, 500);
                    }else{
                        l.destroy();
                    }
                }).error();
            }
        });
    });
</script>

<script>
    $(function(){
        let index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        /**
         * 关闭当前窗口
         */
        $('.close-btn').click(function(){
            parent.layer.close(index);
        });

        //下拉框更新样式
        $('.exampleSelect').each(function() {
            var $this = $(this);
            $this.lyearSelect({
                width: $this.data('width') ? $this.data('width') : '', // width示例：75px、50%
                placeholder: $this.data('placeholder') ? $this.data('placeholder') : '请选择',
                search: $this.data('search') ? $this.data('search') : false,
            });
        });
    });
</script>